<template>
    <view class="wrap">
        <!-- 有数据的情况 -->
        <view class="main-item" v-for="(item, index) in allList" :key="index" @click="viewDetail(item)">
            <view class="image-wrap">
                <view class="left-image-wrap" v-if="item.photos[0]">
                    <LazyImage class="lazy-image" :imageStyle="imageStyle" :mode="mode" :src="item.photos[0].image_url_t"></LazyImage>
                </view>
                <view class="right-image-wrap">
                    <view class="small" v-if="item.photos[1]">
                        <LazyImage class="lazy-image" :imageStyle="imageStyle" :mode="mode" :src="item.photos[1].image_url_t"></LazyImage>
                    </view>
                    <view class="small" v-if="item.photos[2]">
                        <LazyImage class="lazy-image" :imageStyle="imageStyle" :mode="mode" :src="item.photos[2].image_url_t"></LazyImage>
                    </view>
                </view>
            </view>
            <view class="name">{{ item.name }}</view>
            <view class="num">共{{ item.photos.length }}张</view>
        </view>
        <!-- 没数据 -->
        <!-- 未找到照片 -->
        <NoData v-if="noData" :textTip="textTip"></NoData>
    </view>
</template>
<script>
import LazyImage from '@/components/LazyImage/index.vue';
import NoData from '@/components/NoData/index.vue';
import { getNobuyData } from '@/api/photos.js';
export default {
    name: '',
    data() {
        return {
            mode: 'aspectFill',
            imageStyle: {
                width: '100%',
                height: '100%',
                borderRadius: '10rpx'
            },
            // 所有景区数量
            allList: [],
            noData: false,
            textTip: '暂无照片哦，快去筛选购买吧！'
        };
    },
    props: {
        name: {
            type: String,
            default: ''
        }
    },
    computed: {},
    onLoad() {},
    onShow() {
        this.getList();
    },
    methods: {
        async getList() {
            try {
                this.allList = await getNobuyData();
                if (!this.allList || this.allList.length <= 0) {
                    this.noData = true;
                }
            } catch (err) {
                this.noData = true;
            }
        },
        // 景区详情
        viewDetail(item) {
            this.$u.vuex('vuex_toBePaidList', item.photos);
            this.$u.vuex('vuex_tobePaidUserId', item.userid);
            this.$u.route('/pages/minePages/toBePaid/toBePaid', {
                name: item.name
            });
        }
    },
    watch: {},
    components: { LazyImage, NoData },
};
</script>
<style lang="scss" scoped>
.wrap {
    width: 100%;
    background: #f7f7f7;
    .main-item {
        margin-top: 30rpx;
        padding: 20rpx;
        background: #fff;
        .image-wrap {
            display: flex;
            justify-content: space-between;
            .left-image-wrap {
                width: 460rpx;
                height: 312rpx;
                border-radius: 10rpx;
            }
            .right-image-wrap {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .small {
                    width: 230rpx;
                    height: 146rpx;
                    border-radius: 10rpx;
                }
            }
        }
        .name {
            font-size: 30rpx;
            font-weight: bold;
            color: #262832;
            padding-top: 20rpx;
        }
        .num {
            color: #bebebe;
            font-size: 24rpx;
            padding-top: 10rpx;
        }
    }
}
</style>
